<template>
  <div
    :class="[
      user_login_border,
      css_child_margin_top,
      css_content_padding,
      css_wind_light_hover,
      css_ab_center,
      css_color_active_border_hover,
    ]"
    :id="user_login_border"
  >
    <div :class="[title_user_login, css_h1]" :id="title_user_login">
      {{ placeholder_title_user_login }}
    </div>
    <div
      :class="[
        user_login_account,
        css_child_margin_top,
        css_content_padding,
        css_wind_light_hover,
      ]"
      :id="user_login_account"
    >
      <div :class="[title_user_login_account]" :id="title_user_login_account">
        {{ placeholder_user_login_account }}
      </div>
      <input
        :class="[user_login_inp, css_font_size_20, user_login_account_inp]"
        type="text"
        :id="user_login_account_inp"
      />
    </div>

    <div
      :class="[
        user_login_passworld,
        css_child_margin_top,
        css_content_padding,
        css_wind_light_hover,
      ]"
      :id="user_login_passworld"
    >
      <div
        :class="[title_user_login_passworld]"
        :id="title_user_login_passworld"
      >
        {{ placeholder_user_login_passworld }}
      </div>
      <input
        :class="[user_login_inp, css_font_size_20, user_login_passworld_inp]"
        type="password"
        :id="user_login_passworld_inp"
      />
    </div>

    <div :class="[user_login_func]" :id="user_login_func">
      <div
        :class="[
          user_login_func_submit,
          css_content_padding,
          css_wind_light_hover,
          css_cursor_pointer,
        ]"
        :id="user_login_func_submit"
      >
        {{ placeholder_user_login_submit }}
      </div>
    </div>

    <div
      :class="[
        user_logined,
        css_h1,
        css_content_padding,
        css_color_active,
        css_disnone,
      ]"
      :id="user_logined"
    >
      {{ placeholder_user_logined }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import './user_login.css';
import { init_user_login } from './user_login';
import {
  css_ab_center,
  css_child_margin_top,
  css_color_active,
  css_color_active_border_hover,
  css_content_padding,
  css_cursor_pointer,
  css_disnone,
  css_font_size_20,
  css_h1,
  css_wind_light_hover,
} from '../../../global_comps/Css';
import {
  placeholder_title_user_login,
  placeholder_user_login_account,
  placeholder_user_login_passworld,
  placeholder_user_login_submit,
  placeholder_user_logined,
  title_user_login,
  title_user_login_account,
  title_user_login_passworld,
  user_login_account,
  user_login_account_inp,
  user_login_border,
  user_login_func,
  user_login_func_submit,
  user_login_inp,
  user_login_passworld,
  user_login_passworld_inp,
  user_logined,
} from './DataDefine/sourceData';

let cur_user_login_props = defineProps({});

onMounted(() => {
  init_user_login();
});
</script>
